
<script>
export default {
    data() {
        return {
            names: [
                {
                    "id": "42",
                    "imgUrl": "https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png",
                    "hrefUrl": "/category/1181622006",
                    "type": "1"
                },
                {
                    "id": "48",
                    "imgUrl": "https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nvshen_sj.png",
                    "hrefUrl": "/category/1181622003",
                    "type": "1"
                },
                {
                    "id": "45",
                    "imgUrl": "https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/xinnian_sj.png",
                    "hrefUrl": "/category/1181622001",
                    "type": "1"
                }
            ]
        }
    }
}
</script>
<template>
    <ul v-for="item in names">
        <li>{{ item.id }}</li>
        <li>{{ item.hrefUrl }}</li>
        <li>
            <img :src="item.imgUrl" alt="">
        </li>
    </ul>

</template>
<style>
ul {
    display: flex;
    border: 1px solid #000;
    flex: content;
    justify-content: space-between;

}

li {
    list-style-type: none;
}
</style>